import React, { useState } from 'react';
import { Form, Input, Radio, Button, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import styled from 'styled-components';
import { useNavigate, useParams } from 'react-router-dom';

const Container = styled.div`
  padding: 16px;
  background: #fff;
  min-height: 100vh;
`;

const Title = styled.h2`
  font-size: 18px;
  margin-bottom: 20px;
  text-align: center;
`;

const StyledForm = styled(Form)`
  .ant-form-item-label {
    font-weight: 500;
  }
`;

const AfterSaleApply = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const { orderId } = useParams();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      // 这里添加提交售后申请的逻辑
      const afterSaleData = {
        id: Date.now().toString(), // 生成唯一ID
        orderId,
        type: values.type,
        reason: values.reason,
        description: values.description,
        images: values.images?.fileList?.map(file => file.url) || [],
        createTime: new Date().toISOString(),
        status: 'PENDING' // 初始状态为待审核
      };

      // 保存到 localStorage
      const afterSales = JSON.parse(localStorage.getItem('afterSales') || '[]');
      afterSales.push(afterSaleData);
      localStorage.setItem('afterSales', JSON.stringify(afterSales));

      message.success('售后申请提交成功');
      navigate(`/app/order/${orderId}`);
    } catch (error) {
      message.error('提交失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Container>
      <Title>申请售后</Title>
      <StyledForm
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{ type: 'refund' }}
      >
        <Form.Item
          label="售后类型"
          name="type"
          rules={[{ required: true, message: '请选择售后类型' }]}
        >
          <Radio.Group>
            <Radio value="refund">仅退款</Radio>
            <Radio value="return">退货退款</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          label="退款原因"
          name="reason"
          rules={[{ required: true, message: '请选择退款原因' }]}
        >
          <Radio.Group>
            <Radio value="quality">商品质量问题</Radio>
            <Radio value="wrong">商品与描述不符</Radio>
            <Radio value="damaged">商品损坏</Radio>
            <Radio value="other">其他原因</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          label="问题描述"
          name="description"
          rules={[{ required: true, message: '请填写问题描述' }]}
        >
          <Input.TextArea rows={4} placeholder="请详细描述您遇到的问题" />
        </Form.Item>

        <Form.Item
          label="上传凭证"
          name="images"
        >
          <Upload
            listType="picture"
            maxCount={3}
            beforeUpload={() => false}
          >
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" block loading={loading}>
            提交申请
          </Button>
        </Form.Item>
      </StyledForm>
    </Container>
  );
};

export default AfterSaleApply;